2019年鐵人賽 、 JS通常看到 <form> 就會想到裡面的資料是要送到後端做一些事情(如增刪修之類的事)，但還是看一下定義怎麼說。
摘自MDN
The element defines how the data will be sent.All of its attributes are designed to let you configure the request to be sent when a user hits a submit button.
<form> 定義數據如何發送，所有屬性都是用來設定 submit 的 request，比較重要的兩個屬性是 action 和 method。
action摘自MDN
The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.
action 定義數據的發送位置
範例：未指定 action 屬性，數據將發送到和表單所在的同一頁面
<form></form>
範例：數據將發送到指定的URL位置(也就是web server位置)
<form action="http://foo.com"></form>
methodThe method attribute defines which HTTP method to send the data with (it can be "get" or "post").
method 定義用哪個 HTTP 方法(get 或 post)發送數據。
method 預設的 HTTP 方法是 get。
先看一下如果不用 <form> 要怎麼傳送的數據？
範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<label for="forLableName">姓名</label>
<input name="userName" id="forLableName" value="su" type="text" required >
</div>
<div>
<label for="forLablePhone">電話</label>
<input name="userPhone" id="forLablePhone" value="0988" type="text" required pattern="[0-9]{4}">
</div>
<div>
<button onclick="sent()">onclickFunction-Sent</button>
</div>
<script>
function sent(){
//取得值
let userName = document.querySelector("#forLableName").value;
let userPhone = document.querySelector("#forLablePhone").value;
//組成網址
let url = "http://localhost:8000/testTwo.html"
let queryString = `?userName=${userName}&userPhone=${userPhone}`;
window.location.href = url + queryString;
//建立 XMLHttpRequest
let sentRequest = new XMLHttpRequest();
//發送 HTTP 請求(get)
sentRequest.open("get",url);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>hi</div>
<script>
//取得當前網址
var queryString = decodeURIComponent(window.location.search);
//取得?後的 key 跟 value
queryString = queryString.substring(1); //userName=ma&userPhone=0988
//拆成array
var queries = queryString.split("&"); //["userName=su", "userPhone=0988"]
//一個個抓出來
for (var i = 0; i < queries.length; i++)
{
document.write(queries[i] + "<br>");
}
</script>
</body>
</html>
再來看看用 <form> 的方便
範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="http://localhost:8000/testTwo.html" method="get">
<div>
<label for="forLableName">姓名</label>
<input name="userName" id="forLableName" value="su" type="text" required >
</div>
<div>
<label for="forLablePhone">電話</label>
<input name="userPhone" id="forLablePhone" value="0988" type="text" required pattern="[0-9]{4}">
</div>
<div>
<button>form-Sent</button>
</div>
</form>
</body>
</html>
HTTP 請求如下
GET /?userName=su&userPhone=0988 HTTP/1.1
Host: localhost:8000
小結：
範例：
<form action="http://foo.com" method="post">
<div>
<label for="forLableName">姓名</label>
<input name="userName" id="forLableName" value="su" type="text" required >
</div>
<div>
<label for="forLablePhone">電話</label>
<input name="userPhone" id="forLablePhone" value="0988" type="text" required pattern="[0-9]{4}">
</div>
<div>
<button>form-Sent</button>
</div>
</form>
HTTP 請求如下
POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
userName=su&userPhone=0988
小結：
iThome鐵人賽
看影片追技術